<div class="bg-body-tertiary">
    <nav class="container-xxl" aria-label="breadcrumb">
        <ol class="flex-nowrap overflow-y-hidden overflow-x-auto breadcrumb breadcrumb-chevron py-1" style="--bs-breadcrumb-margin-bottom:0;">
        {{- range .Ancestors.Reverse }}
            {{ if .IsHome }}
            <li class="breadcrumb-item">
                <button class="btn text-secondary" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
                    <svg class="bi" width="16" height="16"><use href="#bi-house-door"></use><title>{{ T "sitemap" }}</title></svg>
                </button>
                <div class="dropdown-menu p-3 dropdown-menu-start" style="--bs-dropdown-min-width: calc(100vw - var(--bs-gutter-x))">
                    <div class="row row-cols-2 row-cols-md-4 gx-1 gy-4 text-center">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                    </div>
                </div>
            </li>
            {{ else }}
            <li class="breadcrumb-item">
                <a class="text-nowrap link-secondary link-offset-2 link-underline-opacity-0 link-underline-opacity-75-hover" href="{{ .RelPermalink }}?from=breadcrumb" title="{{ .LinkTitle }}">{{ .LinkTitle }}</a>
            </li>
            {{ end }}
        {{- end }}
            <li class="breadcrumb-item active" aria-current="page">
                <a class="text-nowrap link-secondary link-offset-2 link-underline-opacity-0 link-underline-opacity-50-hover" href="{{ .RelPermalink }}?from=breadcrumb" title="{{ .LinkTitle }}">{{ .LinkTitle }}</a>
            </li>
        </ol>
    </nav>
</div>
